// 登录组件
import React from 'react';
import { useNavigate } from 'react-router-dom';
import style from '@/style/AppLogin.module.css';
import { Button, Form, Input, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { checkLogin } from '@/api/users.js'
const AppLogin = () => {
  let navigate = useNavigate();
  //表单填写完成的回调
  const onFinish = async values => {
    const { code, msg, id, role, token } = await checkLogin(values)
    if (code === 0) {
      message.success(msg)
      //跳转到首页
      navigate('home')
      sessionStorage.setItem('user', JSON.stringify({ id, role, token }))
    }
  };
  const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div className={style.login}>
      <Form
        name="basic"
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
        className={style.loginForm}
      >
        <div className={style.loginTitle}>系&nbsp;统&nbsp;登&nbsp;录</div>
        <Form.Item
          label={null}
          name="account"
          rules={[{ required: true, message: '请输入账号!' }]}
        >

          <Input prefix={<UserOutlined />} placeholder='请输入用户名' 
          style={{backgroundColor: 'rgba(0, 0, 0,0)',color: '#fff'}} 
          />
        </Form.Item>

        <Form.Item
          name="password"
          label={null}
          rules={[{ required: true, message: '请输入密码!' }]}
        >
          <Input.Password   prefix={<LockOutlined />}  type='password' placeholder='请输入密码' autoComplete='off'
           style={{backgroundColor: 'rgba(0, 0, 0,0)',color: '#fff', }}
           className={style.loginInput}
           />
        </Form.Item>
        <Form.Item label={null}>
          <Button type="primary" htmlType="submit" className={style.loginBtn}>
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}
export default AppLogin;
